<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>身份验证</title>
    <link rel="stylesheet" href="__STATIC__/index/css/weui.css"/>
    <link rel="stylesheet" href="__STATIC__/index/css/example.css"/>
    <script src="__STATIC__/index/js/jquery-1.11.3.js"></script>
    <script src="__STATIC__/index/js/jquery.js"></script>
    <script src="__STATIC__/index/layer/layer.js"></script>
    <style>
        .bg{background: url('../img/loginbg.png')no-repeat;
            width: 100%;
            height: 40%;
            background-size: 100% 100%;
        }
        .weui-cells{
            margin-top:1.17647059em;
            background-color:#F8F8F8;
            line-height:1.47058824;
            font-size:17px;
            overflow:hidden;
            position:relative;
        }
        .register{
            font-size: 1rem;
        }
        .backg{
            background-image: url('__STATIC__/index/images/backg.png');
            background-size: 100% 200%;
        }
    </style>
</head>
<body ontouchstart class="backg">
<form action="identityimgadd" method="post" name="form1" enctype="multipart/form-data">
<div style="width:90%;position:absolute;top: 7%;left: 50%;transform: translateX(-50%);" >
    <div class="weui-cells" style="background-color:transparent;">
        <div class="weui-cell" style="height: 140px;background-color:transparent;">
            <div class="weui-cell__bd" style="height:100%;">

                <div class="" style="width:100%;height:100%;background: url('../../index/img/shenfenz.png')no-repeat;background-size: 100% 100%;">
                    <input style="width:100%;height:100%;"  class="weui-uploader__input"  accept="image/*" capture="camera" type="file" id="book-file" name="identitycardimgjust" onchange="show2(this)" onclick="captureImage()">

                    <img id="book-pic2"  style="width:100%;height:100%;">

                </div>
            </div>
        </div>
    </div>
    <div class="weui-cells" style="background-color:transparent;">
        <div class="weui-cell" style="height: 140px;background-color:transparent;">
            <div class="weui-cell__bd" style="height:100%;">

                <div class="" style="width:100%;height:100%;background: url('../../index/img/shenfenf.png')no-repeat;background-size: 100% 100%;">
                    <input style="width:100%;height:100%;"  class="weui-uploader__input"  accept="image/*" capture="camera" type="file" id="book-file" name="identitycardimgback" onchange="show(this)" onclick="captureImage()">

                    <img id="book-pic"   style="width:100%;height:100%;">

                </div>
            </div>
        </div>
    </div>

    <div class="weui-cells" style="background-color:transparent;">
        <div class="weui-cell" style="height: 140px;background-color:transparent;">
            <div class="weui-cell__bd" style="height:100%;">

                <div class="" style="width:100%;height:100%;background: url('__STATIC__/index/img/shouchi.png')no-repeat;background-size: 100% 100%;">
                    <input style="width:100%;height:100%;"  class="weui-uploader__input"  accept="image/*" capture="camera" type="file" id="book-file" name="personal" onchange="show3(this)" onclick="captureImage()">

                    <img id="book-pic3"   style="width:100%;height:100%;">

                </div>
            </div>
        </div>
    </div>
    <br/>
    <br/>
    <a class="weui-btn weui-btn_primary" style="background: #265EC4;" id="showTooltips" onclick="login()" >下一步</a>
</div>
</form>
</body>
<script>
    function login() {
        var identitycardimgjust = $(" input[ name='identitycardimgjust' ] ").val();
        var identitycardimgback = $(" input[ name='identitycardimgback' ] ").val();
        var personal = $(" input[ name='identitycardimgback' ] ").val();
        if(identitycardimgjust == ""){layer.msg('请上传身份证正面');return false;}
        if(identitycardimgback == ""){layer.msg('请上传身份证反面');return false;}
        if(personal == ""){layer.msg('请上传手持身份证');return false;}
        document.form1.submit();
    }
    function show(f) {
        var rd = new FileReader();//创建文件读取对象
        var files = f.files[0];//获取file组件中的文件
        rd.readAsDataURL(files);//文件读取装换为base64类型
        rd.onloadend = function(e) {
            //加载完毕之后获取结果赋值给img
            document.getElementById("book-pic").src = this.result;
        }
    }
    function show2(f) {
        var rd = new FileReader();//创建文件读取对象
        var files = f.files[0];//获取file组件中的文件
        rd.readAsDataURL(files);//文件读取装换为base64类型
        rd.onloadend = function(e) {
            //加载完毕之后获取结果赋值给img
            document.getElementById("book-pic2").src = this.result;
        }
    }

    function show3(f) {
        var rd = new FileReader();//创建文件读取对象
        var files = f.files[0];//获取file组件中的文件
        rd.readAsDataURL(files);//文件读取装换为base64类型
        rd.onloadend = function(e) {
            //加载完毕之后获取结果赋值给img
            document.getElementById("book-pic3").src = this.result;
        }
    }

</script>
<script src="__STATIC__/index/js/mui.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>-->
<!--<script src="http://apps.bdimg.com/libs/mui/2.8.0/js/mui.min.js"></script>-->
<!--<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>-->
<script>
    function plusReady(){
        var old_back = mui.back;
        mui.back = function() {
            //alert('不关闭')
        }
    }
    if(window.plus){
        plusReady();
    }else{
        document.addEventListener("plusready",plusReady,false);
    }

//分割线
   //拍照
   //  function captureImage(){
   //      var cmr = plus.camera.getCamera();
   //      var res = cmr.supportedImageResolutions[0];
   //      var fmt = cmr.supportedImageFormats[0];
   //      console.log("Resolution: "+res+", Format: "+fmt);
   //      cmr.captureImage( function( path ){
   //              alert( "Capture image success: " + path );
   //          },
   //          function( error ) {
   //              alert( "Capture image failed: " + error.message );
   //          },
   //          {resolution:res,format:fmt}
   //      );
   //  }


</script>
</html>